今日計畫: 結合 Chakra UI 和 framer-motion 來打造 Reveal 效果。
解釋一下 Reavel 效果是指當元件進入到畫面 viewport 時會有一個淡入的效果進入畫面。
相似得效果可以參考 react-reveal

第一步 Chakra UI component 結合 motion

(會需要結合單純是為了同時可以讓元件有著 Chakra UI syle props的特性方便我們做處理 )
我們使用 motion() HOC方法去結合我們要使用的 component
要注意過去的方法是 motion.custom()在4.0版本已棄用，目前是使用 motion() ，相關討論

import { Flex } from '@chakra-ui/react';//引入要結合的 UI 元件
import { motion } from 'framer-motion';  // 引入 motion

const MotionFlex = motion(Flex); // HOC

第二步 Scroll-triggered animations

備註上個版本是 whileInView 是在 gestures　文件上，現在官方有額外把 scroll 功能拉出來獨力一個文件：
scroll-animations

whileInView: Properties or variant label to animate to while the element is in view.
我們可以定義一系列的屬性或變數作為滑動觸發時的效果

<MotionFlex 
   initial={{ opacity: 0 }}　// 觸發前的狀態
   whileInView={{ opacity: 1 }} //當滑度觸發時　透明度為一
/>

第三步 viewport options 設定

viewport 讓我們可以做跟視窗有相關的數值的設定
once 設定觸發是否為單次、margin 元素進入 viewport 的邊距、amount 與 viewport交叉的程度

<MotionFlex 
   initial={{ opacity: 0 }}　// 觸發前的狀態
   whileInView={{ opacity: 1 }} //當滑度觸發時　透明度為一
   viewport={{ once: flase, amount: 0.6 }} //每次都會觸發
/>

這樣下來就完成基本的 Reveal 效果